<template>
  <div class="year_header">
    <span @click="popupPicker">{{ year }} 年度 <van-icon :style="{
      transform: show ? 'rotate(0deg)' : 'rotate(90deg)',
      transition: 'all 0.3s',
      fontSize: '14px',
      verticalAlign: 'middle',
      marginBottom: '3px'
    }" name="play" /></span>
    <van-popup position="bottom" :style="{ height: '40%' }" v-model:show="show">
      <van-picker v-model="selectedValues" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
const emit = defineEmits(['confirmYear'])
const selectedValues = ref([1]);
const props = defineProps({
  year: {
    type: String,
    default: ''
  }
})
const curYear = new Date().getFullYear();
const show = ref(false);
const popupPicker = () => {
  show.value = true;
}
const columns = [0, 1, 2].map(val => {
  return {
    text: String(curYear - val),
    value: val
  }
})
const onConfirm = ({ selectedOptions }: any) => {
  emit('confirmYear', selectedOptions[0])
  show.value = false;
};

const onCancel = () => show.value = false;
</script>

<style lang='less' scoped>
.year_header {
  font-size: 24px;
  color: #f1cb5e;
  font-weight: 700;
  font-family: PingFangSC-Semibold, PingFang SC;
  margin-top: 100px;
  margin-bottom: 20px;
}
</style>